{% extends 'base.html' %}
{% load ewai %}
{% block content %}

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">表单</div>
        <div class="panel-body">

            <form id="Formadd">
                <div class="clearfix">
                    {% for field in form %}
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label>{{ field.label }}</label>
                            {{ field }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="col-xs-12">
                    <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
                </div>
            </form>
        </div>
    </div>



    <hr/>
    <h3>示例1</h3>
    <input id="btn1" type="button" class="btn btn-primary" value="点击">

    <h3>示例2</h3>
    <input type="text" id="txtUser" placeholder="姓名">
    <input type="text" id="txtAge" placeholder="年龄">
    <input id="btn2" type="button" class="btn btn-primary" value="点击">
    <div>
        {{ name|my_upper}}
        {{ name|my_upper1:"123"}}
        {% my_upper3 "123" "45" "67" "89"%}
    </div>
</div>
{% endblock %}


{% block js %}
<!--    <script type="text/javascript">-->
<!--        function clickME() {-->
<!--            console.log("点击了按钮");-->
<!--            $.ajax({-->
<!--                url:'/task/ajax',-->
<!--                type:"get",-->
<!--                data:{-->
<!--                    na:123,-->
<!--                    na2:456-->
<!--                },-->
<!--                success:function (res) {-->
<!--                    console.log(res);-->
<!--                }-->
<!--            })-->
<!--        }-->
<!--    </script>-->
    <script type="text/javascript">
        (function () {
            //页面框架加载完成之后代码自动执行
            bindBtn1Event();
            bindBtn2Event();
            bindBtnAddEvent();
        })

        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                    url:'/tasks/ajax',
                    type:"post",
                    data:{
                        na:123,
                        na2:456
                    },
                    dataType:"JSON",
                    success:function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data)
                    }
            })
            })
        }

        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                    url:'/tasks/ajax',
                    type:"post",
                    data:{
                        name:$("#txtUser").val(),
                        age:$ ("#txtAge").val()
                    },
                    dataType:"JSON",
                    success:function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data)
                    }
            })
            })
        }

        function bindBtnAddEvent() {
            $("#btnAdd").click(function () {
                $.ajax({
                    url:'/tasks/add/',
                    type:"post",
                    data:$("#Formadd").serialize(),
                    dataType:"JSON",
                    success:function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data)
                    }
            })
            })
        }


    </script>

{% endblock %}